<template>
  <div class="markdown">
    <marks ref="marks"></marks>
    <button @click="getVal">val方式进行获取</button>
    <button @click="getHtml">html方式进行获取</button>
    <button @click="setVal">val方式进行赋值</button>
    <button @click="setHtml">html方式进行赋值</button>
  </div>
</template>

<script>
import marks from "@/components/MarkdownEditor/index";
export default {
  components: {
    marks
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    getVal() {
      console.log(this.$refs.marks.getValue());
    },
    getHtml() {
      console.log(this.$refs.marks.getHtml());
    },
    setVal() {
      this.$refs.marks.setValue("我爱你");
    },
    setHtml() {
      this.$refs.marks.setHtml("<span style='color:red'>123</span>");
    }
  }
};
</script>

<style lang="scss">
.markdown .te-md-splitter {
  width: 50%;
}
.markdown .te-preview {
  width: 100% !important;
}
</style>
